<template>
    <u-popup class="auth-box" ref="deletpopup" mode="center" :mask-close-able="true" close-icon-pos="top-left" border-radius="20">
        <view class="notice-box">
            <view class="img-wrap"><image class="notice-img" src="/static/images/Groupgantanghao@2x.png" mode=""></image></view>
            <view class="notice-title">{{ title }}</view>
            <view class="notice-detail">{{ sub_title }}</view>
            <view class="u-flex u-row-between" style="width: 100%;">
                <button class="u-reset-button back-btn" @tap="cloes()">{{cancel_text}}</button>
                <button class="u-reset-button notice-btn" @tap="sure()">{{ sure_text }}</button>
            </view>
        </view>
    </u-popup>
</template>

<script>
/**
 * shopro-navbar -自定义标题栏
 * @property {Boolean} isBack = [true] - 是否显示返回按钮
 * @property {Booelan} isFixed = [true] - 是否开启定位
 */

// 获取系统状态栏的高度
export default {
    name: 'shopro-tabbar',
    data() {
        return {
        };
    },
    computed: {

    },
    props: {
        title: {
            type: String,
            default: "删除确认"
        },
        sub_title: {
            type: String,
            default: "是否确定删除该地址？"
        },
        cancel_text: {
            type: String,
            default: "取消"
        },
        sure_text: {
            type: String,
            default: "确定"
        },
    },
    methods: {
        sure(){
            this.$emit('sure')
        },
        cloes(){
            this.$refs.deletpopup.close()
            if(this.cancel_text == '原价购买'){
                this.$emit('close')
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.auth-box {
    width: 100%;
    height: 100%;
    background: none;
    .notice-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        width: 612rpx;
        min-height: 558rpx;
        background: #ffffff;
        padding: 30rpx;
        border-radius: 20rpx;
        .img-wrap {
            margin-bottom: 50rpx;
            .notice-img {
                width: 180rpx;
                height: 170rpx;
            }
        }
        .notice-title {
            font-size: 35rpx;
            font-weight: bold;
            color: #46351b;
            margin-bottom: 28rpx;
        }
        .notice-detail {
            font-size: 28rpx;
            font-weight: 400;
            color: #999999;
            line-height: 36rpx;
            margin-bottom: 50rpx;
        }
        .notice-btn {
            width: 45%;
            line-height: 70rpx;
            background: linear-gradient(-90deg, #FFBF02, #FFBF02);
            //box-shadow: 0px 7rpx 11rpx 2rpx #FFBF02;
            border-radius: 35rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #ffffff;
            margin-bottom: 10rpx;
        }
        .back-btn {
            width: 45%;
            line-height: 70rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #999999;
            background: #F3F3F3;
            border-radius: 35rpx;
        }
    }
}
</style>
